<template>
  <el-card class="box">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :key="'bc' + index" v-for="(item, index) in getCrmbreadcrumbByPageName">
        {{ item }}</el-breadcrumb-item>
    </el-breadcrumb>
  </el-card>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
// import { useRouter } from 'vue-router'
// import { watch, ref } from 'vue'

import { storeToRefs } from "pinia";
import { useMenuStore } from "../../../stores/menu";
const menuStore = useMenuStore()
const { getCrmbreadcrumbByPageName } = storeToRefs(menuStore)


// const currentpath = ref([])
// // 实例化路由对象
// const router = useRouter()
// // 监听当前路由
// watch(
//   () => router.currentRoute.value, //  箭头路径的改变
//   (newValue) => {
//     // console.log('newValue', paths[newValue.name])
//     // 使用[ ] ,通过反射机制调用对象属性
//     //  key = 'emp'
//     // paths[key]  ====  paths.emp

//     currentpath.value = paths[newValue.name]
//   },
//   { immediate: true } // immediate 箭头立即生效
// )
</script>

<style scoped>
.box {
  width: 99%;
  /* height: 4%; */
  border-radius: 5px;
}

.el-card>>>.el-card__body {
  padding: 4px 0 0 20px;
}
</style>